<template>
  <div>
    <a-row>
      <a-col span="8">
        <a-card style="height: 50vh;overflow-y: auto;overflow-x: auto">
          <a-form :form="form">
            <a-form-item
                label="显示名称"
                :label-col="{span:6}"
                :wrapper-col="{span:18}"
            >
              <a-input
                  v-decorator="['label', {
                                rules: [{ required: true, message: '请输入显示名称！' }],
                                initialValue: this.editData && this.editData.label
                            }]"
                  allowClear
                  style="width: 80%"
              />
            </a-form-item>
            <a-form-item
                label="初始得分"
                :label-col="{span:6}"
                :wrapper-col="{span:18}"
            >
              <a-input-number
                  v-decorator="['initScore', {
                                rules: [{ required: true, message: '请输入初始得分！' }],
                                initialValue: this.editData && this.editData.initScore
                            }]"
                  allowClear
                  style="width: 80%"
              />
            </a-form-item>
            <a-form-item
                label="命中基数"
                :label-col="{span:6}"
                :wrapper-col="{span:18}"
            >
              <a-input-number
                  v-decorator="['baseNum', {
                                rules: [{ required: true, message: '请输入命中基数！' }],
                                initialValue: this.editData && this.editData.baseNum
                            }]"
                  allowClear
                  style="width: 80%"
              />
            </a-form-item>
            <a-form-item
                label="操作符"
                :label-col="{span:6}"
                :wrapper-col="{span:18}"
            >
              <a-select
                  v-decorator="['operator', {
                                initialValue: this.editData ? this.editData.operator:'NONE'
                            }]"
                  allowClear
                  style="width: 80%"
              >
                <a-select-option value="NONE">
                  请选择...
                </a-select-option>
                <a-select-option value="ADD">
                  加
                </a-select-option>
                <a-select-option value="DEC">
                  减
                </a-select-option>
                <a-select-option value="MUL">
                  乘
                </a-select-option>
                <a-select-option value="DIV">
                  除
                </a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item
                label="指标字段"
                :label-col="{span:6}"
                :wrapper-col="{span:18}"
            >
              <a-cascader :options="getOptions"
                          v-decorator="['abstractionName', {
                                rules: [{ required: this.requir, message: '请输入指标字段！' }],
                                initialValue: this.editData ? this.editData.abstractionName?this.editData.abstractionName.split('.'):null:null
                            }]"
                          allowClear
                          style="width: 80%"
              />
            </a-form-item>
            <a-form-item
                label="比率"
                :label-col="{span:6}"
                :wrapper-col="{span:18}"
            >
              <a-input-number
                  v-decorator="['rate', {
                                rules: [{ required: true, message: '请输入比率！' }],
                                initialValue: this.editData && this.editData.rate
                            }]"
                  allowClear
                  style="width: 80%"
              />
            </a-form-item>
            <a-form-item
                label="最大值"
                :label-col="{span:6}"
                :wrapper-col="{span:18}"
            >
              <a-input-number
                  v-decorator="['max', {
                                rules: [{ required: true, message: '请输入最大值！' }],
                                initialValue: this.editData && this.editData.max
                            }]"
                  allowClear
                  style="width: 80%"
              />
            </a-form-item>
          </a-form>
        </a-card>
      </a-col>
      <a-col span="16">
        <a-card style="height: 50vh;overflow: auto">
          <div v-if="!conditionData.class" style="text-align: center">
            <a-button type="dashed" icon="plus" @click="addCondition">
              添加过滤条件
            </a-button>
          </div>
          <Assemble
              :assemble-data="conditionData"
              :previous="conditionData"
          ></Assemble>
        </a-card>
      </a-col>
    </a-row>

    <div style="text-align: center">
      <a-space>
        <a-button type="primary" @click="handleOk">保存</a-button>
        <a-button type="danger" @click="reset">重置</a-button>
        <a-button v-if="this.rulePopupTitle != '新建'" type="danger" @click="deleteAbstraction">删除</a-button>
      </a-space>
    </div>
  </div>
</template>

<script>
import {mapActions, mapState} from "vuex";
import Assemble from "@/pages/systemManage/abstractionList/condition/Assemble";
import {uniqueId} from 'lodash'

export default {
  name: "ManageRuleForm",
  components: {Assemble},
  props: {
    editData: Object
  },
  computed: {
    ...mapState('rule', ['rulePopupTitle']),
    ...mapState('fieldManage', ['tableData']),
    getOptions() {
      let data = []
      this.tableData.map((obj) => {
        data.push({value: obj.fieldName, label: obj.label})
      })
      return [{
        value: 'fields',
        label: '基础字段',
        children: data
      }]
    }
  },
  data() {
    return {
      requir: false,
      form: this.$form.createForm(this, {onValuesChange: this.onValuesChange}),
      conditionData: this.editData ? JSON.parse(this.editData.ruleDefinition) : {
        class: "complex",
        conditions: [{
          class: "simple",
          random: uniqueId('c_')
        }]
      }
    }
  },
  methods: {
    ...mapActions('rule', ['addRule', 'queryAllRule', 'update', 'deleteById']),
    addCondition() {
      this.conditionData = {
        class: "complex",
        conditions: [{
          class: "simple",
          random: uniqueId('c_')
        }]
      }
    },
    reset() {
      this.addCondition()
      this.form.resetFields()
    },
    deleteAbstraction() {
      this.deleteById(this.editData.objectId)
    },
    handleOk() {
      this.form.validateFields((err, values) => {
        if (!err) {
          let {abstractionName, operator} = values
          if (abstractionName) {
            abstractionName = abstractionName[0] + '.' + abstractionName[1]
          }
          if (!operator) {
            operator = 'NONE'
          }
          let scripts = "class AbstractionCheckScript {\n  public boolean check(def data, def lists) {    if ((data.fields.accessTime))\n        return true;\n    else\n        return false;\n}}"
          let ruleDefinition = JSON.stringify(this.conditionData)
          values = {...values, abstractionName, scripts, operator, ruleDefinition}
          if (this.rulePopupTitle == '新建') {
            this.addRule(values).then(() => {
              this.queryAllRule()
            })
          } else {
            this.update(values).then(() => {
              this.queryAllRule()
            })
          }
        }
      })
    },
    onValuesChange(props, values) {
      let {operator} = values
      if (operator) {
        this.requir = true
      } else {
        this.requir = false
      }
    }
  }
}
</script>

<style scoped>

</style>
